import { Col, Divider, Image, Row, Space, Tag } from "antd"
import Paragraph from "antd/es/typography/Paragraph"
import Title from "antd/es/typography/Title"
import { useState } from "react"

export const ProductDetails = (props) => {
    const id=props.id;
    console.log("产品详情id",id)
    const [currentProduct, setCurrentProduct] = useState({
        id: 1,
        name: "推拿按摩",
        category: "理疗项目",
        categoryType: "treatment",
        price: 188.00,
        specs: [
            {
                name: "30分钟"
            }, {
                name: "60分钟"
            }
        ],
        description: "60分钟专业推拿，缓解肌肉疲劳，疏通经络，促进血液循环。适合长期办公族、颈椎腰椎不适人群。",
        duration: 60,
        master: "all",
        masterName: "全部员工",
        effect: "缓解疲劳、疏通经络、促进血液循环",
        attention: "孕妇慎用，饭后1小时内不宜进行，皮肤有破损者不宜进行",
        mainImage: "https://picsum.photos/id/133/600/400",
        images: [
            "https://picsum.photos/id/134/600/400",
            "https://picsum.photos/id/135/600/400",
            "https://picsum.photos/id/136/600/400",
            "https://picsum.photos/id/137/600/400",
            "https://picsum.photos/id/139/600/400"
        ],
        status: "active",
        sort: 80,
        sales: 356,
        remarks: "需提前1天预约，周末及节假日价格上浮20%"
    });

    const displayImages = currentProduct.images;

    return (
        <div className="modal-box">
            {/* 产品基础信息与图片 */}
            <Row gutter={[20, 20]} style={{ marginBottom: 20 }}>
                <div style={{ display: "flex", width: "100%" }}>
                    {/* 封面图片 */}
                    <Image
                        width="50%"
                        height={280}
                        src="http://116.62.217.197:9921/yaoyaoche/Goods/Cover/04060c0c0271000e1651147cbfc56e47.jpg"
                        preview={false}
                        style={{ objectFit: 'cover', borderRadius: 4, marginBottom: 16 }}
                    />

                    <div>
                        <div style={{ flex: 1, marginLeft: 10 }}>
                            <Title level={3} style={{ marginBottom: 12 }}>{currentProduct.name}</Title>
                            <Space size="middle" style={{ marginBottom: 16 }}>
                                <Tag color="#8B5A2B" style={{ backgroundColor: 'rgba(139, 90, 43, 0.1)', color: '#8B5A2B' }}>
                                    {currentProduct.category}
                                </Tag>
                                {currentProduct.status === 'active' ? (
                                    <Tag color="success">启用</Tag>
                                ) : (
                                    <Tag color="default">禁用</Tag>
                                )}
                            </Space>

                           
                            <div style={{ marginBottom: 8 }}>
                                <div>产品规格</div>
                                <div>
                                    {currentProduct.specs.map((d) => (
                                        <Tag>{d.name}</Tag>
                                    ))}
                                </div>
                            </div>
                            <div>
                                <label type="secondary">销量：</label>
                                <label>{currentProduct.sales} 次</label>
                            </div>
                             <div style={{ marginBottom: 2 }}>
                                <label strong style={{ fontSize: 20, color: '#CD5C5C' }}>¥{currentProduct.price.toFixed(2)}</label>
                            </div>
                        </div>
                    </div>


                </div>
                <div>
                    {/* 详情图片展示 - 一行显示所有图片，无滚动条 */}
                    {displayImages.length > 0 && (
                        <div style={{
                           
                            padding: 16,
                            borderRadius: 4
                        }}>
                            <Title level={5} style={{ marginBottom: 12 }}>产品详情图</Title>
                            {/* 使用弹性盒子实现一行显示所有图片 */}
                            <div style={{
                                display: 'flex',
                                gap: 8,
                                width: '100%',
                                boxSizing: 'border-box'
                            }}>
                                {displayImages.map((img, index) => (
                                    <div
                                        key={index}
                                        style={{
                                            // 根据图片数量计算每个图片容器的宽度
                                            width: `calc(100% / ${displayImages.length} - ${(displayImages.length - 1) * 8 / displayImages.length}px)`,
                                            flexShrink: 0
                                        }}
                                    >
                                        <Image
                                            width="100%"
                                            height={100}
                                            src={img}
                                            preview={false}
                                            style={{
                                                objectFit: 'cover',
                                                borderRadius: 4,
                                                cursor: 'pointer',
                                                transition: 'transform 0.2s'
                                            }}
                                            onMouseOver={(e) => e.currentTarget.style.transform = 'scale(1.02)'}
                                            onMouseOut={(e) => e.currentTarget.style.transform = 'scale(1)'}
                                        />
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}
                </div>


            </Row>

            <Divider />

            {/* 产品描述 */}
            <div style={{ marginBottom: 20 }}>
                <Title level={5} style={{ display: 'flex', alignItems: 'center' }}>
                    产品描述
                </Title>
                <Paragraph style={{ lineHeight: 1.6 }}>{currentProduct.description}</Paragraph>
            </div>

            {/* 分类特有信息 */}
            <div style={{ marginBottom: 20 }}>
                <Title level={5} style={{ display: 'flex', alignItems: 'center' }}>
                    详细信息
                </Title>

                {currentProduct.categoryType === 'treatment' && (
                    <Row gutter={[16, 16]}>
                      
                     
                        <Col xs={24} sm={12}>
                            <label strong>主要功效：</label>
                            <label>{currentProduct.effect}</label>
                        </Col>
                        <Col xs={24} sm={12}>
                            <label strong>注意事项：</label>
                            <label>{currentProduct.attention}</label>
                        </Col>
                    </Row>
                )}

                {['medicine', 'equipment', 'drink'].includes(currentProduct.categoryType) && (
                    <Row gutter={[16, 16]}>
                        <Col xs={24} sm={12}>
                            <label strong>库存：</label>
                            <label>{currentProduct.stock} {currentProduct.unit}</label>
                        </Col>
                        <Col xs={24} sm={12}>
                            <label strong>产地/厂家：</label>
                            <label>{currentProduct.origin || '未填写'}</label>
                        </Col>
                        {currentProduct.expiry && (
                            <Col xs={24} sm={12}>
                                <label strong>保质期：</label>
                                <label>{currentProduct.expiry} 天</label>
                            </Col>
                        )}
                    </Row>
                )}

                {currentProduct.categoryType === 'package' && (
                    <Row gutter={[16, 16]}>
                        <Col xs={24} sm={12}>
                            <label strong>包含项目：</label>
                            <label>{currentProduct.itemNames?.join('、')}</label>
                        </Col>
                        <Col xs={24} sm={12}>
                            <label strong>有效期：</label>
                            <label>{currentProduct.validity} 天</label>
                        </Col>
                        <Col xs={24}>
                            <label strong>套餐说明：</label>
                            <label>{currentProduct.notes}</label>
                        </Col>
                    </Row>
                )}
            </div>

            {/* 备注信息 */}
            {currentProduct.remarks && (
                <div>
                    <Title level={5} style={{ display: 'flex', alignItems: 'center' }}>
                        备注信息
                    </Title>
                    <Paragraph
                        style={{
                            backgroundColor: 'rgba(245, 245, 220, 0.3)',
                            padding: 12,
                            borderRadius: 4
                        }}
                    >
                        {currentProduct.remarks}
                    </Paragraph>
                </div>
            )}
        </div>
    )
}
